import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter/widgets.dart';

class MorePage extends StatefulWidget {
  const MorePage({super.key});

  @override
  State<MorePage> createState() => _MorePageState();
}

class _MorePageState extends State<MorePage> {
  final dio = Dio();
  final ScrollController _scrollController = ScrollController();
  int _page = 1;
  bool hasMore = true;
  final List _list = [];

  @override
  void initState() {
    super.initState();
    _getData();

    //监听页面滚动事件
    _scrollController.addListener(() {
      //获取滚动条下拉的距离
      var pixels=  _scrollController.position.pixels;
      //获取整个页面的高度
      var maxScrollExtent =  _scrollController.position.maxScrollExtent;
      print("滚动距离:${pixels}");
      print("整个页面的高度:${maxScrollExtent}");
      if(pixels >= maxScrollExtent -40){
        _getData();
      }
    });
  }

  void _getData() async {
    if(hasMore){
      var response = await dio.get(
          "https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$_page");
      var ret = json.decode(response.data)["result"];
      setState(() {
        _list.addAll(json.decode(response.data)["result"]);
        _page++;
      });
      if(ret.length <= 0){
        hasMore=false;
      }
    }
  }

  Future<void> _onRefresh() async {
    print("下拉刷新");
    _getData();
  }

  Widget _getMoreWidget(){
    if(hasMore){
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("加载中...",style: TextStyle(fontSize: 16),),
              CircularProgressIndicator(
                strokeWidth: 1,
              )
            ],
          ),
        ),
      );
    }
    return const Center(
      child: Text("我是有底线的"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter App"),
      ),
      body: _list.isNotEmpty ?
        RefreshIndicator(     //下拉刷新指示器,需要指定onRefresh方法,此方法必须为一个异步方法
            onRefresh: _onRefresh,
            child: ListView.builder(
                controller: _scrollController,
                itemCount: _list.length,
                itemBuilder: (context, index) {
                  if(index == _list.length -1){
                    return Column(
                      children: [
                        ListTile(
                          title: Text("${_list[index]["title"]}"),
                        ),
                        const Divider(),
                        _getMoreWidget(),
                      ],
                    );
                  }
                  return Column(
                    children: [
                      ListTile(
                        title: Text("${_list[index]["title"]}"),
                      ),
                      const Divider(),
                    ],
                  );
                }
            )
        ) : const Text("正在加载中"),
    );
  }
}
